import "../../../Utils/jquery.js";
import { getStyle } from "../../../Utils/getStyle.js";

$.fn.extend({
  //定义一个创建盒子的方法
  createBox(id) {
    let oBox = document.createElement("div");
    $(oBox).addClass(`r4-box ${id}`);
    $(".r4-left").append(oBox);
  },
  //定义一个渲染结构的方法
  render(id) {
    let $oCont = `<div class="r4-cont">
                    <div class="line1 df">
                      <div class="l1-left">
                        <img src="../../images/10005.jpg" alt="" />
                      </div>
                      <div class="fl1 l1-cen">
                        <h5>${id}</h5>
                        <p>13天前发布</p>
                      </div>
                      <div class="l1-right">...</div>
                    </div>
                    <h3>
                      <span>卖家发货</span>
                      宵宫雷神阿莫斯风鹰剑琴地卢克邮箱未绑定
                    </h3>
                    <div class="line3 df">
                      <div class="l3-left">
                        <div class="l3-l-box df">
                          <div class="l3-1-cont">
                            <img src="../../images/10041.png" alt="" />
                            所在区服<span>米哈游服</span>
                          </div>
                          <div class="l3-1-cont">
                            <img src="../../images/10042.png" alt="" />
                            账号类型<span>成品号</span>
                          </div>
                          <div class="l3-1-cont">
                            <img src="../../images/10043.png" alt="" />
                            邮箱实名<span>没有绑定邮箱</span>
                          </div>
                          <div class="l3-1-cont">
                            <img src="../../images/10044.png" alt="" />
                            冒险等级<span>40</span>
                          </div>
                        </div>
                      </div>
                      <div class="l3-right">
                        <div class="l3-r-cont">
                          <h4>¥220.00</h4>
                          <p>当前库存1件</p>
                          <p>本账号评估价0元</p>
                          <a>购买</a>
                        </div>
                      </div>
                    </div>
                    <div class="line4">
                      <div class="l4-box">
                        <div class="l4-cont pos-r df">
                        </div>
                      </div>
                    </div>
                    <div class="line5">
                      <div class="l5-box df">
                        <div class="l5-cont">收藏</div>
                        <div class="l5-cont">分享</div>
                        <div class="l5-cont">评论</div>
                        <div class="l5-cont">账号详情</div>
                      </div>
                    </div>
                  </div>`;
    $(`.${id}`).html($oCont);
  },

  //往结构中放数据
  addImg(arr, location) {
    for (let i = 0; i < arr.length; i++) {
      let $img = document.createElement("img");
      $(location).append($img);
    }
    $(location)
      .find("img")
      .map((index1, item1) => {
        arr.forEach((item, index) => {
          if (index1 == index) {
            $(item1).attr("src", item);
          }
        });
      });
  },
});
const comList = JSON.parse(sessionStorage.com || "[]");
$(function () {
  for (let i = 0; i < comList.length; i++) {
    $(".r4-left").createBox(comList[i].id);
    $(`.${comList[i].id}`).render(comList[i].id);
  }
  //遍历拿到的商品信息列表,取到其中的imgs数组
  comList.forEach((item) => {
    // console.log($(`.${item.id} h5`).text());
    //如果商品信息中的id与盒子的id相同就添加图片
    if ($(`.${item.id} h5`).text() == item.id) {
      $(`.${item.id}`).addImg(item.imgs, `.${item.id} .l4-cont`);
      // console.log(`.${item.id} .l4-cont`);
      // console.log(item);
    }
  });
});
$(function () {
  $(".r4-left").on("click", function (e) {
    let { target } = e;
    // console.log(target.nodeValue, target.nodeName);
    if (target.nodeName == "A" && $(target).text() == "购买") {
      let n = $(target).parents(".r4-box").index();
      comList.splice(n, 1);
      sessionStorage.com = JSON.stringify(comList);
      $(".r4-left .r4-box").remove();
      console.log(comList);
      for (let i = 0; i < comList.length; i++) {
        $(".r4-left").createBox(comList[i].id);
        $(`.${comList[i].id}`).render(comList[i].id);
      }
      //遍历拿到的商品信息列表,取到其中的imgs数组
      comList.forEach((item) => {
        // console.log($(`.${item.id} h5`).text());
        //如果商品信息中的id与盒子的id相同就添加图片
        if ($(`.${item.id} h5`).text() == item.id) {
          $(`.${item.id}`).addImg(item.imgs, `.${item.id} .l4-cont`);
          // console.log(`.${item.id} .l4-cont`);
          // console.log(item);
        }
      });
    }

    // [...oAs].splice(index, 1);
    // comList.splice(index, 1);
    // sessionStorage.com = JSON.stringify(comList);
    // $(".r4-left .r4-box").remove();
    // console.log(comList);
  });
});

//放大镜
function offset(obj) {
  const o = { left: obj.offsetLeft, top: obj.offsetTop };
  while (obj.offsetParent) {
    obj = obj.offsetParent;
    o.left += obj.offsetLeft;
    o.top += obj.offsetTop;
  }
  return o;
}

const sImg = document.querySelector(".sImg");
const bImg = document.querySelector(".bImg");
const sArea = document.querySelector(".sArea");
const bArea = document.querySelector(".bArea");
window.onload = function () {
  const oImgs = document.querySelectorAll(".l4-cont img");
  oImgs.forEach((item, index) => {
    item.onclick = function (e) {
      let { target } = e;
      sImg.style.backgroundImage = `url(${target.src})`;
      bImg.src = target.src;
      let oScore =
        parseFloat(getStyle(bImg, "width")) /
        parseFloat(getStyle(sImg, "width"));
      sImg.onmouseenter = function () {
        sArea.style.display = "block";
        bArea.style.display = "block";
        document.onmousemove = function (e) {
          let { pageX, pageY } = e;
          let mX = pageX - offset(sImg).left - sArea.offsetWidth / 2;
          if (mX <= 0) {
            mX = 0;
          }
          if (mX >= sImg.offsetWidth - sArea.offsetWidth) {
            mX = sImg.offsetWidth - sArea.offsetWidth;
          }
          sArea.style.left = mX + "px";
          let mY = pageY - offset(sImg).top - sArea.offsetHeight / 2;
          if (mY <= 0) {
            mY = 0;
          }
          if (mY >= sImg.offsetHeight - sArea.offsetHeight) {
            mY = sImg.offsetHeight - sArea.offsetHeight;
          }
          sArea.style.top = mY + "px";
          bImg.style.left = mX * -oScore + "px";
          bImg.style.top = mY * -oScore + "px";
        };
      };
      sImg.onmouseleave = function () {
        sArea.style.display = "none";
        bArea.style.display = "none";
      };
    };
  });
};
